<template>
	<view class="mytab">
		<!-- 底部tabbar -->
		<u-tabbar :value="currentTabIndex" :activeColor="activeColor" inactiveColor="#626873">
			<u-tabbar-item v-for="(item, index) in tabbar" :key="index"	:text="item.text" 
				:icon="index == currentTabIndex ? item.selectedIconPath : item.iconPath" @click="onChangeTab"
			></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				showMoreMenus: false,
				activeColor: '#626873',
				tabbar: [{
						iconPath: "/static/imgs/tabs/sy.png",
						selectedIconPath: "/static/imgs/tabs/sy.png",
						text: "首页",
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "/static/imgs/tabs/txl.png",
						selectedIconPath: "/static/imgs/tabs/txl.png",
						text: "通讯录",
						pagePath: "/pages/contact/index"
					},
					{
						iconPath: "/static/imgs/tabs/wd.png",
						selectedIconPath: "/static/imgs/tabs/wd.png",
						text: "我的",
						pagePath: "/pages/mine/index"
					},
				],
			}
		},
		mounted() {
			uni.hideTabBar();
			var currentRoute = getCurrentPages()[0].route;
			this.changeCharacter(this.characterType);
			var index = this.tabbar.findIndex(n => {
				return n.pagePath.includes(currentRoute);
			});

			this.changeTab(index);
		},
		computed: {
			...mapState(['currentTabIndex', 'characterType'])
		},
		options: { styleIsolation: 'shared' },
		methods: {
			...mapMutations(['changeTab']),
			onChangeTab: function (value) {
				var item = this.tabbar[value];
				this.changeTab(value);
				uni.switchTab({
					url: item.pagePath
				});
			},
			bottomMenuClick: function (item) {
				console.log(item);
			},
			changeCharacter: function (type) {
				if (type == 1) { // 教师
					this.activeColor = '#FF8800';
					this.tabbar.forEach(n => {
						n.selectedIconPath = n.iconPath.replace('.png', '1.png');
					});
				} else {
					// 学员
					this.activeColor = '#5BC68D';
					this.tabbar.forEach(n => {
						n.selectedIconPath = n.iconPath.replace('.png', '2.png');
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.addButton {
	background: url(../../static/imgs/tabs/+.png);
	width: 104rpx;
	height: 104rpx;
	position: absolute;
	bottom: calc(-56rpx + 50px);
	bottom: calc(-56rpx + 50px + constant(safe-area-inset-bottom));
	bottom: calc(-56rpx + 50px + env(safe-area-inset-bottom));
	z-index: 1;
	background-size: 100% 100%;
	left: calc(375rpx - 52rpx);
	
}
.mytab {
	position: fixed;
	bottom: 0;
	z-index: 10;
}
.mytab /deep/ .u-tabbar__content {
	border-top: none;
	box-shadow: 0 3px 5px black;
}
.mytab /deep/ .u-tabbar__content__item-wrapper {
	.u-tabbar-item__icon {
		height: 46rpx;
        .u-icon__img {
        	width: 46rpx !important;
        	height: 46rpx !important;
        }
	}
	
}

.moreMenusPop {
	background: #ffffffe6; 
	.menuButtons {
    display: flex;
    flex-wrap: wrap;
    margin: 30rpx;
    position: absolute;
    bottom: 80rpx;
		justify-content: space-around;
		.buttom {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			.name {
				font-size: 26rpx;
				white-space: nowrap;
			}
			.logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}

 
</style>
